<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '我的',
    navigationBarBackgroundColor: '#FFFFFF',  
  }, 
}
</route>
<template>
  <view class="custom-card px-4">
    <view class="flex items-center py-4">
      <wd-img round width="104rpx" height="104rpx" src="/static/icon/avatar.svg" />
      <view class="flex-1 ml-3">
        <view class="text-base text-black font-semibold">张三</view>
        <wd-tag custom-class="custom-tag" color="#2953FF" bg-color="#f4f6ff">管理员</wd-tag>
      </view>
      <wd-icon name="arrow-right" size="22rpx"></wd-icon>
    </view>
  </view>
  <view class="custom-card px-4 my-2">
    <view class="flex items-center py-4" @click="handleInfo">
      <wd-img width="36rpx" height="36rpx" src="/static/icon/icon7.svg" />
      <view class="text-sm text-black flex-1 mx-1">基本信息</view>
      <wd-icon name="arrow-right" size="22rpx"></wd-icon>
    </view>
    <view class="custom-drivider"></view>
    <view class="flex items-center py-4" @click="handlePassword">
      <wd-img width="36rpx" height="36rpx" src="/static/icon/icon8.svg" />
      <view class="text-sm text-black flex-1 mx-1">修改密码</view>
      <wd-icon name="arrow-right" size="22rpx"></wd-icon>
    </view>
  </view>
  <view class="custom-card px-4 my-2">
    <view class="flex items-center py-4" @click="handleOut">
      <wd-img width="36rpx" height="36rpx" src="/static/icon/icon9.svg" />
      <view class="text-sm color-red flex-1 mx-1">退出账户</view>
      <wd-icon name="arrow-right" size="22rpx"></wd-icon>
    </view>
  </view>
</template>

<script lang="ts" setup>
const handleInfo = () => {
  uni.navigateTo({
    url: '/pages/mine/info',
  })
}
const handlePassword = () => {
  uni.navigateTo({
    url: '/pages/mine/password',
  })
}
const handleOut = () => {
  //   uni.clearStorageSync()
  //   uni.reLaunch({
  //     url: '/pages/login/index',
  //   })
}
onMounted(() => {})
</script>
<style lang="scss">
page {
  background: #f4f8fb;
  /* #ifdef H5 */
  padding-bottom: 180rpx;
  min-height: calc(100vh - 180rpx);
  /* #endif */
}
</style>
<style lang="scss"scoped>
$primary-color: #2953ff;
$warning-color: #ff910b;
$error-color: #ff354a;
.color-blue {
  color: $primary-color;
}
.color-yellow {
  color: $warning-color;
}
.color-red {
  color: $error-color;
}

.custom-drivider {
  height: 1rpx;
  margin: 0;
  background: #e5e5e5;
}
.custom-card {
  background: #fff;
}
.custom-tag {
  padding: 4rpx 16rpx !important;
}
</style>

